<template>
  <div>
    <header class="mui-bar mui-bar-nav">
        <a @click="loginOut" class=" mui-btn mui-btn-link mui-btn-nav mui-pull-left">
          <span class="mui-icon mui-icon-left-nav"></span>
          退出
        </a>
        <h1 class="mui-title">来画画吧 {{userName}}</h1>
        <router-link to="/CreateRoom" class="mui-btn mui-btn-link mui-pull-right">创建新房间</router-link>
    </header>
    <div class="mui-content">
        <draw-card class="mui-card" v-for="item in drawList" :key="item.key" :item=item />
    </div>
  </div>
</template>
<script>
import DrawCard from "./DrawCard";
import { mapGetters } from "vuex";

export default {
  name: "WelcomeDraw",
  created() {
    this.$store.dispatch("getRoomList");
  },
  mounted() {},
  components: {
    DrawCard
  },
  computed: mapGetters(["userName", "drawList"]),
  watched: {
    userName(val) {
      console.log("userName change " + val);
    }
  },
  methods: {
    loginOut() {
      this.$store.dispatch("logOut").then(rst => {
        this.$router.replace("/");
      });
    }
  }
};
</script>
<style scoped>
header {
  position: fixed;
}
</style>
